<template>
  <layout :loading="loading" :error="error" :error-message="errorMsg" :layoutStyle="layoutStyle">
    <template v-slot:normal>
      <Tab>
        <div :style="{height:'1000px'}">
        <category></category>
         <activity/>
         <venue/>
         </div>
      </Tab>

        <bottom-bar></bottom-bar>
    </template>
  </layout>
</template>

<script>
import BottomBar from './components/BottomBar.vue'
import Category from './components/Category.vue'
import Activity from './components/Activitys.vue'
import Venue from './components/Venue/index.vue'
import Tab from './components/Tabs.vue'
import { getHome } from '@/api/home.js'
export default {
  name: 'Home',
  components: {
    Tab,
    Category,
    BottomBar,
    Activity,
    Venue
  },
  data () {
    return {
      loading: true,
      error: false,
      errorMsg: '',
      layoutStyle: {
        backgroundImage: 'url("http://fast-learn-oss.youbaobao.xyz/tb/bg.png")',
        backgroundRepeat: 'no-repeat',
        backgroundSize: '100% 557px'
      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.loading = false
      this.error = false
      this.errorMsg = '别紧张, 试试看刷新页面~'
    }, 1000)
    this.getHome()
  },
  methods: {
    async getHome () {
      try {
        const res = await getHome()
        console.log(res)
        this.loading = false
        this.error = false
        this.$store.dispatch('SET_HOME', res)
      } catch (error) {
        this.loading = false
        this.error = true
        this.errorMsg = error.message
      }
    }
  }

}
</script>
